{include file="common/header-top" /}

<style>

    .job-detail-title-cell{
        padding: 3px 16px;
    }

    .job-detail-title{
        font-size: 18px;
        font-weight: 500;
    }

    .job-detail-money-cell{
        margin-top: 2px;
    }
    .job-detail-money{
        display: block;
        padding: 5% 10%;
    }
    .job-detail-money span{
        display: block;
        text-align: center;
        padding: 2% 0%;
    }
    .job-detail-article{
        font-size: .8rem;
        color: #2a2a2c;
        padding: 0% 4%;
    }

</style>

<div id="app"  v-cloak>


    <van-nav-bar title="兼职详情" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>

    <!--兼职头部标题-->
    <van-row style="margin-top: 3%;">
        <van-col span="18">
            <van-cell :border="false" class="job-detail-title-cell">
                <span class="van-ellipsis job-detail-title" :title="jobDetail.title">{{jobDetail.title}}</span>
            </van-cell>
            <van-cell  icon="/__FRONT__/images/icon/baozhang.png" :border="false"  class="job-detail-title-cell">
                <van-tag
                    type="success"
                    @click="showBusInfo"
                >{{approveName}}</van-tag>
            </van-cell>
            <van-cell :border="false"  class="job-detail-title-cell">
                <span>招聘人数：{{jobDetail.need_worker}}人/报名人数：{{jobDetail.had_worker}}人</span>
            </van-cell>
        </van-col>

        <van-col span="6" class="job-detail-money-cell">
            <van-tag plain class="job-detail-money">
                <span class="money-font" style="font-size: 22px;color: #fe9e39;">{{jobDetail.salary}}</span>
                <span>{{jobDetail.salary_unitCh}}</span>
                <span style="color: #2a2a2c;font-weight: bold;">{{jobDetail.settlement_typeCh}}</span>
            </van-tag>
        </van-col>
    </van-row>
    <!--兼职头部标题-->


    <van-divider :style="{borderColor: '#32a14a', padding: '0 16px' }"></van-divider>

    <van-cell :title="jobDetail.address"
          icon="/__FRONT__/images/icon/location-icon.png"
          is-link
          :value="getDistance"
          style="padding-top: 0px;"
          :border="false"
          @click="viewLocation"
    ></van-cell>

    <!--工作流程-->
    <van-row>
        <van-col span="24">
            <van-image src="/__FRONT__/images/icon/apply-process.png"></van-image>
        </van-col>
    </van-row>
    <!--工作流程-->


    <!--招聘详情-->
    <van-row>
        <van-cell title="兼职详情" icon="/__FRONT__/images/icon/job-detail-icon.png" size="large">
            <van-icon name="arrow-down"></van-icon>
        </van-cell>
        <van-cell>
            <van-icon name="location">详细地址:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.provinces_name}} {{jobDetail.address}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="clock">工作日期:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.work_timeCh}} - {{jobDetail.work_time_endCh}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="clock">上下班时间:</van-icon>
            <span style="padding-left: 5%;">
                {{jobDetail.work_up_time ? jobDetail.work_up_time : '无'}} - {{jobDetail.work_down_time ? jobDetail.work_down_time : '无'}}
            </span>
        </van-cell>
        <van-cell>
            <van-icon name="friends">性别要求:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.genderCh}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="/__FRONT__/images/icon/job-detail-welfare.png"></van-icon>
            <span style="color: #323233; text-align: left;">福利:</span>
            <div class="van-multi-ellipsis--l3" v-if="jobContent.work_welfare">
                <template v-for="item in jobContent.work_welfareArr">
                    <p>{{item}}</p>
                </template>
            </div>
        </van-cell>
    </van-row>
    <!--招聘详情-->


    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '0px'}"></van-divider>

    <!--工作要求-->
    <van-row>
        <van-cell title="工作要求" icon="/__FRONT__/images/icon/job-detail-require.png" size="30px">
            <van-icon name="arrow-down"></van-icon>
        </van-cell>
        <van-col span="24">
            <article class="job-detail-article">
                <template v-for="item in jobContent.requirementArr">
                    <p>{{item}}</p>
                </template>
            </article>
        </van-col>
    </van-row>
    <!--工作要求-->

    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '0px'}"></van-divider>

    <!--工作内容-->
    <van-row>
        <van-cell title="工作内容" icon="/__FRONT__/images/icon/job-detail-content.png" size="30px">
            <van-icon name="arrow-down"></van-icon>
        </van-cell>
        <van-col span="24">
            <article class="job-detail-article">
                <template v-for="item in jobContent.contentArr">
                    <p>{{item}}</p>
                </template>
            </article>
        </van-col>
    </van-row>
    <!--工作内容-->

    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '0px'}"></van-divider>

    <!--招聘人信息-->
    <van-row>
        <van-cell title="招聘者" icon="/__FRONT__/images/icon/job-detail-from.png" size="30px"></van-cell>
        <van-col span="5">
            <van-image
                round
                width="60"
                height="60"
                :src="jobPublishUser.avatar"
            ></van-image>
        </van-col>
        <van-col span="12">
            <van-cell style="padding: 10px 5px;" :border="false">
                <span>{{jobDetail.contacts}}</span>
            </van-cell>
        </van-col>
        <van-col span="6">
            <div style="padding-top: 10%;display: block;">
                <a :href="getCallHref" v-if="isCallBus">
                    <van-button
                            icon="/__FRONT__/images/icon/job-detail-mobile.png"
                            type="primary"
                    >Call
                    </van-button>
                </a>
            </div>
        </van-col>
    </van-row>
    <!--招聘人信息-->

    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '5px 0px'}"></van-divider>

    <van-row style="padding-bottom: 70px;">
        <van-cell :title="getApplyTitle" :border="false"></van-cell>
        <van-col span="24">
            <van-tabs v-model="active" title-active-color="#7d7e80" title-inactive-color="#7d7e80" line-height="0px" :border="false">
                <van-tab v-for="item in jobApplyList">
                    <div slot="title">
                        <van-image :src="item.userAvatar" lazy-load round width="40px" height="40px"></van-image>
                    </div>
                </van-tab>
            </van-tabs>
        </van-col>
    </van-row>



    <van-row>
        <van-col span="24">
            <van-goods-action>
                <van-goods-action-icon
                    :icon="getCollectImg"
                    text="收藏"
                    :info="getCollectNum"
                    @click="collectJob"
                ></van-goods-action-icon>
                <van-goods-action-button
                        type="danger"
                        color="#f32108"
                        :text="getApplyText"
                        style="border-radius: 0px; margin-left: 20px;"
                        @click="applyJob"
                        :disabled="showApplyButton"
                ></van-goods-action-button>
            </van-goods-action>
        </van-col>
    </van-row>




    <!--商家简介-->
    <van-popup
            v-model="showBusinessIntro"
            position="bottom"
            :style="{ height:'100%'}"
    >
        <van-nav-bar
                title="商家信息"
                left-arrow
                @click-left="showBusinessIntro = false"
                left-text="返回"
        ></van-nav-bar>

        <van-row style="padding: 15px;">
            <van-col span="24">
                <van-image
                        fit="contain"
                        lazy-load
                        :src="businessIntro.company_logo"
                >
                </van-image>
            </van-col>

            <van-cell title="商家名称" :value="businessIntro.company_name"  ></van-cell>

            <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '5px'}"></van-divider>
            <van-cell title="商家简介" icon="/__FRONT__/images/icon/user-setting-company-r.png" ></van-cell>
            <van-col span="24">
                <article>
                    {{businessIntro.company_intro}}
                </article>
            </van-col>
        </van-row>

        <van-row>
            <van-col span="24">
                <van-button
                        type="primary"
                        size="large"
                        @click="showBusinessIntro = false"
                        style="width: 80%;margin-left: 10%;"
                >返回</van-button>
            </van-col>
        </van-row>

    </van-popup>
    <!--商家简介-->



</div>

<script src="/__FRONT__/plugs/wechatJsSDK/jweixin-1.4.0.js"></script>

<script>


    Vue.use(vant.Lazyload);

    var vm = new Vue({
        //挂载点
        el: '#app',
        //数据集合
        data() {
            return {
                active: 1,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                distance: '',
                jobDetail:{},
                jobContent:{},
                jobApplyList:[],
                jobPublishUser: {},

                showBusinessIntro: false,
                businessIntro: {
                    company_name: '',
                    company_logo: '',
                    company_address: '',
                    company_intro: '',
                },

            }
        },

        //创建时执行 操作
        created : function (){
            //微信js SDK 配置
            wx.config({
                debug: false,
                appId: '{$wechatJsSDK.appId|default=""}',
                timestamp: '{$wechatJsSDK.timestamp|default=""}',
                nonceStr: '{$wechatJsSDK.nonceStr|default=""}',
                signature: '{$wechatJsSDK.signature|default=""}',
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'openLocation'
                ]
            });


            var params = {
                id: '{$jobId}',
                extend: 'content,userApply,publishUser'
            };
            //获取兼职详情
            axiosRequest.get('/api/job/detail',{params:params}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.jobDetail = response.data;
                    vm.$data.jobContent = response.data.extendContent;
                    vm.$data.jobApplyList = response.data.extendApplyList;
                    vm.$data.jobPublishUser = response.data.extendPublishUser;
                    wx.ready(function () {
                        wx.updateAppMessageShareData({
                            title: vm.$data.jobDetail.title + '-{$appName}',
                            desc: vm.$data.jobDetail.jobTypeName,
                            link: '{$baseHost}index/Jobs/jobDetail?id=' + vm.$data.jobDetail.id,
                            imgUrl: vm.$data.jobDetail.jobTypeImg,
                        });
                        wx.updateTimelineShareData({
                            title: vm.$data.jobDetail.title + '-{$appName}',
                            desc: vm.$data.jobDetail.jobTypeName,
                            link: '{$baseHost}index/Jobs/jobDetail?id=' + vm.$data.jobDetail.id,
                            imgUrl: vm.$data.jobDetail.jobTypeImg,
                        });
                    });
                } else {
                    vant.Toast({
                        message: response.msg,
                        onClose: function () {
                            history.back();
                        }
                    });
                }
            });

        },

        //挂载完成
        mounted(){
            /*todo::获取离兼职点的距离
            var params = {
                from: '39.071510,117.190091',
                to: '40.007632,116.389160'
            };
            axiosRequest.get('/api/common/distance',{params:params}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.distance = response.data.distance;
                }
            });
            */
        },

        //计算属性
        computed:{
            getCallHref(){
               return 'tel:' + this.jobDetail.mobile;
            },
            getDistance(){
                return this.distance ? (this.distance + 'Km') : '';
            },
            getCollectNum(){
                return (this.jobDetail.collect_num > 1000) ? '1000+' : this.jobDetail.collect_num;
            },
            getApplyTitle(){
                if (this.jobDetail.had_worker) {
                    return '已有' + this.jobDetail.had_worker + '位同学报名';
                } else {
                    return '暂时还没有人报名哦！快来抢沙发!';
                }
            },
            getApplyText(){
                if (this.jobDetail.status != 2) {
                    return this.jobDetail.statusCh;
                }
                return this.jobDetail.applyOption ? '立即报名' : '已经报名';
            },
            showApplyButton(){
                if (this.jobDetail.status != 2) {
                    return false;
                }
                if (this.jobDetail.check_worker >= this.jobDetail.need_worker) {
                    return true;
                }
                if (!this.jobDetail.applyOption) {
                    return true;
                }
                return false;
            },
            getCollectImg(){
                return this.jobDetail.userCollect ? '/__FRONT__/images/icon/user-collect.png' : '/__FRONT__/images/icon/user-collect-no.png';
            },
            approveName(){
                if (this.jobPublishUser.type == 1) {
                    return '个人认证';
                }
                if (this.jobPublishUser.type == 2) {
                    return '商家认证';
                }
                return '平台认证';
            },
            //已报名可已拨打
            isCallBus(){
                if (!this.jobDetail.applyOption) {
                    return true;
                }
                return false;
            }
        },

        //方法集合 在 `methods` 对象中定义方法
        methods: {
            //返回上一页
            goBack(){
                history.back();
            },

            //显示商家信息
            showBusInfo(){
                if (this.jobPublishUser.type == 2) {
                    axiosRequest.get('/api/bus/businessInfo',{params:{businessId:this.jobPublishUser.id}})
                        .then(function (response) {
                            if (response.code == 200) {
                                vm.$data.businessIntro = response.data;
                                //展示商家信息框
                                vm.$data.showBusinessIntro = true;
                            }
                        });
                }
                return false;
            },

            //立即报名
            applyJob(){
                if (this.jobDetail.status != 2) {
                    vant.Toast('报名已关闭，暂时无法报名');
                    return false;
                }
                var postData = {
                    id: this.jobDetail.id,
                };
                axiosRequest.post('/api/job/applyJob', postData).then(function (response) {
                    if (response.code == 200) {
                        vant.Toast('报名成功，请等待招聘人审核通过！');
                        vm.$data.jobDetail.had_worker += 1;
                        vm.$data.jobDetail.applyOption = false;
                    } else {
                        if (response.code == 100004) {
                            vant.Toast({
                                message: response.msg,
                                type: 'fail',
                                onClose() {
                                    window.location.href = '/index/Usercenter/userSetting';
                                }
                            });
                        } else {
                            vant.Toast(response.msg);
                        }
                    }
                });
            },
            //收藏/取消收藏兼职
            collectJob(){
                var postData = {
                    id: this.jobDetail.id,
                    type: 1,
                };
                if (this.jobDetail.userCollect) {
                    //取消收藏
                    axiosRequest.post('/api/user/delCollect', postData).then(function (response) {
                        if (response.code == 200) {
                            vant.Toast('取消收藏成功！');
                            vm.$data.jobDetail.collect_num -= 1;
                            vm.$data.jobDetail.userCollect = false;
                        }
                    });
                } else {
                    //添加收藏
                    axiosRequest.post('/api/user/collect', postData).then(function (response) {
                        if (response.code == 200) {
                            vant.Toast('收藏成功！');
                            vm.$data.jobDetail.collect_num += 1;
                            vm.$data.jobDetail.userCollect = true;
                        }
                    });
                }
            },

            viewLocation(){
                wx.openLocation({
                    latitude: Number(this.jobDetail.longitude),
                    longitude: Number(this.jobDetail.latitude),
                    name: this.jobDetail.address,
                    address: '兼职地点：' + this.jobDetail.provinces_name + this.jobDetail.address,
                    scale: 28,
                });
            }
        }


    });


</script>


